<template>
	<view v-if="showHeader || fixedShow" class="header-wrapper" :class="{'iphone':isIphone, 'normal':!backgroundStyle}" :style="[baseStyle]">
	  <!-- 用来自定义头部背景样式 -->
	  <view class="custom-background" v-if="backgroundStyle" :style="[{'padding-top':statusBarHeight + 'px'},backgroundStyle]"></view>
	  <!--  -->
	  <view class="header-placeholder" :style="{'padding-top':statusBarHeight + 'px'}"></view>
	  <view class="header-inner">
		  <view class="navigation-bar-placeholder" v-if="placeholder" :style="{'padding-top':statusBarHeight + 'px'}"></view>
		  <view class="navigation-bar" :style="[navigationBarStyle||{}]">
		    <view class="status-bar" :style="{'height':statusBarHeight + 'px'}"></view>
		    <view class="title-bar">
				<template v-if="showBack">
					<button v-if="backHome" class="back back-home button" @click="navigateBackHome">
						<text :style="[{borderColor:color}]" :class="[backHomeIconClass, {iconfont:true}]"></text>
					</button>
					<button v-else class="back button" @click="navigateBack">
						<text :class="[backIconClass, {iconfont:true}]"></text>
					</button>
				</template>
		      
		      
		      <view class="left">
		          <slot name="left"></slot>
		      </view>
		      <view v-if="title" class="title">{{title}} </view>
		      <slot name="custom"></slot>
		    </view>
		  </view>
	  </view>
	  <slot name="extend"></slot>
	</view>

</template>

<script>
	const app = getApp()
	export default {
		props:{
			title: {
			  type: String,
			  default: ""
			},
			color:{
			  type: String,
			  default: '#F7F7F7'
			},
			backgroundStyle:{
				type: Object
			},
			navigationBarStyle:{
				type: Object
			},
			customBackground: {
			  type: Boolean,
			  default: false
			},
			
			showBack: {
			  type: Boolean,
			  default: false
			},
			backIconClass: {
			  type: String,
			  default: 'icon-angle-left'
			},
			backHomeIconClass: {
				type: String,
				default: 'icon-home'
			},
			placeholder:{
				type:Boolean
			},
			fixedShow:{
				type:Boolean,
				defalut: false
			}
		},
		data() {
			return {
				titlePaddingTop:"",
				titleBarPaddingTop:"0",
				isIphone:false,
				statusBarHeight: 0
			};
		},
		computed:{
			backHome: function(){
				let pages = getCurrentPages();
				let currentPage = pages[0];
				let path = currentPage.route;
				return (path != 'pages/index/index' && path != '') && pages.length < 2;
			},
			/**
			 * 基本样式
			 */
			baseStyle:function(){
				var style = {};
				if(this.color){
					style.color = this.color;
				}
				
				
				return style;
			}
		},
		created() {
					
			this.isIphone = app.globalData.isIphone;
			this.statusBarHeight = app.globalData.statusBarHeight
			
			
			
		},
		methods:{
			/**
			 * 返回上一页
			 */
			navigateBack() {
			  uni.navigateBack({
				delta: 1
			  })
			},
			/**
			 * 返回首页
			 */
			navigateBackHome(){
				console.log('navigateBackHome');
				uni.reLaunch({
					url:'/pages/index/index'
				})
				/* uni.switchTab({
					url:"/pages/index/index"
				}) */
			}
			
			
		}
	}
</script>

<style scoped lang="scss">
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
		
	
	.header-wrapper{
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
		z-index:100;
		position: relative;
		
		.custom-background{
			position: absolute;
			left: 0;
			top:0;
			right:0;
			width: 100%;
			z-index: 0;
			box-sizing: content-box;
		}
		
		.header-inner{
			position: static;
			z-index: 10;
		}
		
	}
	.header-wrapper.normal .header-inner{
		
	}
	.navigation-bar-placeholder{
	  height: 88rpx;
	  padding-top:var(--status-bar-height);
	}
	.iphone .navigation-bar-placeholder{
		padding-bottom: 8rpx;
	}
	.navigation-bar{
	  position: fixed;
	  width: 100%;
	  top: 0;
	  z-index: 10;
	}
	.header-placeholder{
		height:88rpx;
		display: block;
		width: 100%;
	}
	.title-bar{
	  position: relative;
	  height: 88rpx;
	  line-height: 88rpx;
	  text-align: center;
	}
	.iphone .title-bar{
		margin-top: 8rpx;
	}
	.title-bar .button{
	  background: none;
	  outline: none;
	  border:none;
	  font-size: 36rpx;
	  line-height: 88rpx;
	  color: inherit;
	  vertical-align: bottom;
	}
	
	.title-bar > .back,
	.title-bar > .left,
	.title-bar > .left .back,
	.title-bar > .right{
	  position: absolute;
	  top:0;
	  height: 88rpx;
	}
	.title-bar .back-home{
		width: 88rpx;
		padding:20rpx;
	}
	.title-bar .back-home .iconfont{
		width:40rpx;
		height:40rpx;
		display: block;
		line-height: 38rpx;
		border-radius: 50%;
		border:2rpx solid #F7F7F7;
	}
	
	.title-bar .back{
	  left:0;
	  width: 88rpx;
	}
	.title-bar .left{
	  left: 0rpx;
	}
	.title-bar > .back + .left{
	  left:88rpx;
	}
	
	.title-bar .title{
	  text-align: center;
	  font-size:32rpx;
	  font-family:PingFangSC-Medium;
	  font-weight:700;
	}
</style>
